<template>
    <div class="content">
        <div class="box">
            <!-- 标题 -->
            <TopTitle></TopTitle>
            <div class="contner">
                <!-- 左侧视图 -->
                <div class="transTop">
                    <LeftIndex :width="565"></LeftIndex>
                </div>
                <!-- 中间视图 -->
                <CenterIndex></CenterIndex>
                <!-- 右侧视图 -->
                <div class="transTop">
                    <RightIndex :width="548"></RightIndex>
                </div>
            </div>
            <!-- 底部装饰条 -->
            <BottomIndex></BottomIndex>
            <!-- 在职监督员弹窗 -->
            <transition name="fade">
                <SupervisorsList v-show="store.showOn" />
            </transition>
            <!-- 监督员画像弹窗 -->
             <transition name="fade">
                <PersonnelData v-show="store.showUser" />
             </transition>
             <!-- 履职案件列表弹窗 -->
             <transition name="fade">
                <PerformanceCases v-show="store.showCases" />
             </transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TopTitle from "../components/zhongxian/TopTitle.vue";
import LeftIndex from "../components/zhongxian/left/LeftIndex.vue";
import RightIndex from "../components/zhongxian/right/RightIndex.vue";
import CenterIndex from "../components/zhongxian/center/CenterIndex.vue";
import SupervisorsList from "../components/zhongxian/SupervisorsList.vue";
import PersonnelData from "../components/zhongxian/PersonnelData.vue";
import BottomIndex from "../components/zhongxian/bottom/BottomIndex.vue";
import PerformanceCases from "../components/zhongxian/PerformanceCases.vue";
import { useCounterStore } from '@/stores/poups'
const store = useCounterStore()

//路由跳转方式
// import { useRoute, useRouter } from 'vue-router';
// const router = useRouter();
// function gourl(params:string) {
//     router.push({ path: '/fengjie' });
// }
</script>

<style scoped lang="less">
// opcity动画
// .fade-enter-active, .fade-leave-active {
//   transition: opacity 0.5s;
// }
// .fade-enter-from, .fade-leave-to {
//   opacity: 0;
// }
// scale动画
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.fade-enter-active {
  transform-origin: center center;
  animation:bounce-in .5s;
}
.fade-leave-active {
  transform-origin: center center;
  animation:bounce-in .5s reverse;
}
.content{
    width: 1920px;
    height: 100%;
    background: #001D55;
    .box{
        width: 100%;
        height: 100%;
        background-image: url('../assets/编组 45.png');
        background-size: 100% 100%;
        position: relative;
        .contner{
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    }
}
.transTop{
    transform: translateY(-20px);
}
</style>
